<template>
    <div class="echarts-theme">
        <el-row>
            <el-col :span="12" v-for="item in echartsThemeData" :key="item.name">
                <div class="echarts-theme-item-group" @click="handleClick(item.theme)">
                    <div class="echarts-theme-item-color" :style="{ backgroundColor: sItem }" v-for="sItem in item.theme" :key="sItem" />
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script setup lang="ts">
import { echartsThemeData } from "@/utils/echartsTheme";
import { useThemeStore } from "@/store/modules/themeStore";
const themeStore = useThemeStore();
const handleClick = (theme: Array<string>) => {
    themeStore.updateCurrentColorByArray(theme);
};
</script>
<style scoped>
.echarts-theme-item-group {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    min-height: 32px;
    padding: 5px;
    margin-bottom: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #eee;
    border-radius: 4px;
}

.echarts-theme-item-color {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 2px;
    margin-bottom: 10px;
    margin-left: 2px;
    border-radius: 3px;
}
</style>
